<template>
  <div>
    <!-- 搜索 -->
    <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#1989FA">
      <van-swipe-item v-for="v in banner" :key="v.id">
        <img :src="v.image_url" alt="" width="100%" />
      </van-swipe-item>
    </van-swipe>
    <!-- 五宫格 -->
    <van-grid :column-num="5">
      <van-grid-item
        :icon="v.icon_url"
        :text="v.name"
        v-for="v in channel"
        :key="v.id"
      />
    </van-grid>
    <!-- 品牌制造商直供 -->
    <div id="maker" class="maker">
      <div class="m_title">品牌制造商直供</div>
      <div>
        <ul class="m_ul">
          <li v-for="v in brandList" :key="v.id">
            <img :src="v.pic_url" alt="" width="100%" />
            <div class="m_word">
              <h2 class="m_name">{{ v.name }}</h2>
              <h3 class="m_floor_price">￥ {{ v.floor_price }}.00元</h3>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 周一周四·新品首发 -->
    <div class="new">
      <div class="new_title">周一周四·新品首发</div>
      <div>
        <ul class="new_ul">
          <li v-for="v in newGoodsList" :key="v.id">
            <img :src="v.list_pic_url" alt="" width="100%" />
            <div class="new_word">
              <h2 class="new_name">{{ v.name }}</h2>
              <h3 class="new_retail_price">￥ {{ v.retail_price }}.00元</h3>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 人气推荐 -->
    <div class="recommend">
      <div class="r_title">人气推荐</div>
      <div>
        <ul class="r_ul">
          <li v-for="v in hotGoodsList" :key="v.id">
            <div class="r_left">
              <img :src="v.list_pic_url" alt="" height="100%" />
            </div>
            <div class="r_right">
              <h2 class="r_name">{{ v.name }}</h2>
              <h3 class="r_goods_brief">{{ v.goods_brief }}</h3>
              <h4 class="r_retail_price">￥ {{ v.retail_price }}.00</h4>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 专题精选 -->
    <div class="choice">
      <div class="choice_title">专题精选</div>
      <div>
        <van-swipe :loop="false" :width="300" :show-indicators="false">
          <van-swipe-item
            
            v-for="v in topicList"
            :key="v.id"
          >
            <img
              :src="v.scene_pic_url"
              alt=""
              class="choice_img"
              width="100%"
            />
            <span class="choice_title">{{ v.title }}</span>
            <span class="choice_price_info">￥ {{ v.price_info }}元起</span>
            <h2 class="choice_subtitle van-ellipsis">{{ v.subtitle }}</h2>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- 分类 -->
    <div class="sort" v-for="v in categoryList" :key="v.id">
      <div class="s_name">{{v.name}}</div>
      <ul class="s_ul">
        <li v-for="v in v.goodsList" :key="v.id">
          <img :src="v.list_pic_url" alt="" width="100%">
          <div class="new_word">
              <h2 class="new_name van-ellipsis">{{ v.name }}</h2>
              <h3 class="new_retail_price">￥ {{ v.retail_price }}.00元</h3>
            </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// import axios from "axios";
import { GetHomeList} from "@/request/api";
export default {
  data() {
    return {
      value: "",
      banner: [],
      channel: [],
      brandList: [],
      newGoodsList: [],
      hotGoodsList: [],
      topicList: [],
      categoryList: [],
    };
  },

  components: {},

  created() {
    /* axios
      .get("http://kumanxuan1.f3322.net:8001/index/index")
      .then((res) => {
        console.log(res.data);
        this.banner=res.data.data.banner
      })
      .catch((err) => {
        console.log(err);
      }); */

    GetHomeList()
      .then((res) => {
        // console.log(res);
        if (res.errno == 0) {
          //轮播图
          this.banner = res.data.banner;
          //五宫格
          this.channel = res.data.channel;
          //制造商直供
          this.brandList = res.data.brandList;
          //新品首发
          this.newGoodsList = res.data.newGoodsList;
          //人气推荐
          this.hotGoodsList = res.data.hotGoodsList;
          //专题精选
          this.topicList = res.data.topicList;
          //分类
          this.categoryList = res.data.categoryList;
          
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },

  methods: {},
};
</script>
<style lang='less'>
.m_title,
.new_title,
.r_title,
.choice_title{
  width: 100%;
  height: 0.5rem;
  background-color: #fff;
  text-align: center;
  line-height: 0.5rem;
  margin-top: 0.2rem;
  font-size: 0.2rem;
}
.r_title {
  margin-top: 0.1rem;
}
.m_ul li,
.new_ul li {
  width: 49%;
  position: relative;
}
.m_ul,
.new_ul,
.s_ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: #fff;
}
.m_word {
  position: absolute;
  left: 0.1rem;
  top: 0.1rem;
  font-size: 0.13rem;
}
.m_floor_price,
.new_retail_price {
  margin-top: 0.15rem;
  color: #8b0000;
}
.new_word {
  text-align: center;
  font-size: 0.13rem;
}
.new_ul {
  padding-bottom: 0.2rem;
}
.r_ul {
  background-color: #fff;
}
.r_ul li {
  height: 0.88rem;
  display: flex;
  background-color: #fafafa;
  padding: 0.08rem 0.16rem;
}
.r_ul li:nth-of-type(2) {
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}
.r_name {
  font-size: 0.18rem;
  line-height: 0.29rem;
}
.r_goods_brief {
  font-size: 0.12rem;
  line-height: 0.4rem;
}
.r_retail_price {
  font-size: 0.12rem;
  line-height: 0.2rem;
  color: #8b0000;
}
.choice {
  background-color: #fff;
}
.choice_img {
  height: 2rem;
}
.choice_title {
  font-size: 0.16rem;
}
.choice_price_info {
  font-size: 0.16rem;
  color: #8b0000;
}
.choice_subtitle {
  font-size: 0.14rem;
}
.choice .van-swipe-item:nth-of-type(2) {
  margin-left: 0.2rem;
  margin-right: 0.2rem;
}
.s_name{
  width: 100%;
  height: 0.5rem;
  background-color: #fff;
  text-align: center;
  line-height: 0.5rem;
  font-size: 0.2rem;
}
.s_ul li {
  width: 49%
};
</style>